<template>
    <div class="content">
        <div class="nav">
            <div class="cardBox">
                <div class="card" v-for="(v,index) in cardBox" :key="index">
                    <img :src="v.img" alt="">
                    <p>{{ v.content }}</p>
                </div>
            </div>
        </div>
        <div class="mode">
            <div class="box1">
                <div class="boxLeft topL">
                    <div class="topMsg">
                        <span>寻美乡村</span>
                        <button>
                            启航
                            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01Soe3iW27DVJjfaWRr_!!6000000007763-2-tps-200-200.png" alt="">
                        </button>
                    </div>
                    <p>回归自然 从新开始</p>
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :touchable="false" :show-indicators="false" duration="0">
                        <van-swipe-item v-for="(v,index) in swiperArr" :key="index">
                            <img :src="v.img" alt="">
                      
                        </van-swipe-item>
                    </van-swipe>
                    
                </div>
            </div>
            <div class="box2">
                <div class="boxRight topR">
                    <div class="topMsg">
                        <span>推荐榜单</span>
                        <button>
                            更多
                            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01Soe3iW27DVJjfaWRr_!!6000000007763-2-tps-200-200.png" alt="">
                        </button>
                    </div>
                    <p>县长推荐</p>
                    <div class="dblCard">
                        <div v-for="(v,index) in dblPrice" :key="index">
                            <img :src="v.img" alt="">
                            <div class="price">
                                <p >￥<span class="now">{{ v.now }}</span></p>
                                <p class="origin">￥<span>{{ v.ori }}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box3">
                <div class="boxLeft bottomL">
                    <div class="topMsg">
                        <span>原产地优选</span>
                        <button>
                            更多
                            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01Soe3iW27DVJjfaWRr_!!6000000007763-2-tps-200-200.png" alt="">
                        </button>
                    </div>
                    <p>产地寻宝</p>
                    <img src="https://gw.alicdn.com/imgextra/i2/O1CN01gcuQAQ27xlRHgO0oi_!!6000000007864-1-tps-306-170.gif" alt="">    
                </div>
            </div>
            <div class="box4">
                <div class="boxRight bottomR">
                    <div class="topMsg">
                        <span>助农为乐</span>
                        <button>
                            更多
                            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01Soe3iW27DVJjfaWRr_!!6000000007763-2-tps-200-200.png" alt="">
                        </button>
                    </div>
                    <p>帮农产品走出大山</p>
                    <div class="dblCard">
                        <div v-for="(v,index) in circleArr" :key="index">
                            <img :src="v.img" alt="">
                            <p class="des">{{ v.des }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:"sortPlay",
    data(){
        return {
            cardBox:[
                {
                    img:"https://gw.alicdn.com/imgextra/i2/O1CN01iB4IgZ1tYf2YuwDGX_!!6000000005914-2-tps-90-90.png",
                    content:"水果蔬菜"
                },
                {
                    img:"https://gw.alicdn.com/imgextra/i3/O1CN0180AEMm23xWhW0Pyxl_!!6000000007322-2-tps-90-90.png",
                    content:"米面干货"
                },
                {
                    img:"https://gw.alicdn.com/imgextra/i3/O1CN01WsoY9Y1WB5UOy0Um7_!!6000000002749-2-tps-91-90.png",
                    content:"爱心公益"
                },
                {
                    img:"https://gw.alicdn.com/imgextra/i4/O1CN019UvPQP1aHHOOFdMi4_!!6000000003304-2-tps-91-90.png",
                    content:"消费帮扶"
                },
                {
                    img:"https://gw.alicdn.com/imgextra/i1/O1CN01nPUdL31X0qFPGU7ky_!!6000000002862-2-tps-90-90.png",
                    content:"美丽乡村"
                }
            ],
            swiperArr:[],
            dblPrice:[],
            circleArr:[]
        }
    },
    mounted(){
        this.$http({
            url:`http://localhost:3000/localFoodSwiper`,
            method:"get"
        }).then(res=>{
            this.swiperArr = res.data
        })
        this.$http({
            url:`http://localhost:3000/localPrice`,
            method:"get"
        }).then(res=>{
            this.dblPrice = res.data
        })
        this.$http({
            url:`http://localhost:3000/circlePhoto`,
            method:"get"
        }).then(res=>{
            this.circleArr = res.data
        })
    }
}
</script>

<style lang="scss" scoped>
    .content {
        width: 7.11rem;
        height: 8.37rem;
        margin: 0 auto 0.18rem;
    }
    .content .nav {
        width: 100%;
        height: 1.91rem;
        background: #fff;
        border-radius: 0.24rem;
        overflow: hidden;
        margin-bottom: 0.18rem;
    }
    .content .nav .cardBox {
        width: 6.68rem;
        height: 1.39rem;
        margin: 0.29rem auto 0;
        display: flex;
        justify-content: space-between;
        color: #4f5047;
        font-size: 0.22rem;
    }
    .content .nav .cardBox .card img {
        width: 0.94rem;
        height: 0.94rem;
        margin-bottom: 0.14rem;
    }
    .content .mode {
        width: 100%;
        height: 6.31rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
    }
    .content .mode>div {
        width: 3.47rem;
        height: 3.07rem;
        border-radius: 0.2rem;
        overflow: hidden;
        background: #fff;
    }
    .content .mode .boxLeft {
        width: 3.07rem;
        height: 2.67rem;
        margin: 0.22rem auto 0;
    }
    .content .mode .boxLeft .topMsg {
        height: 0.49rem;
        display: flex;
        justify-content: space-between;

    }
    .content .mode .boxLeft .topMsg span {
        color: #4f5047;
        font-size: 0.32rem;
    }
    .content .mode p {
        font-size: 0.2rem;
        color: #999999;
    }
    .content .mode .boxLeft .topMsg button {
        width: 0.98rem;
        height: 0.49rem;
        border: 0;
        border-radius: 0.2rem;
        color: #fff;
        font-size: 0.26rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content .mode .boxLeft .topMsg button img {
        width: 0.2rem;
        height: 0.2rem;
        margin-left: 0.05rem;
    }
    
    .content .mode .box1 button {
        background: linear-gradient(45deg,#ffa534,#fe741b);
    }
    .content .mode .box3 button {
        background: linear-gradient(45deg,#8de071,#5dc446);
    } 
    .content .mode .boxLeft .van-swipe {
        width: 3.07rem;
        height: 1.85rem;
        border-radius: 0.1rem;
        overflow: hidden;
    }
    .content .mode .boxLeft .van-swipe img {
        width: 100%;
        height: 100%;
    }
    .content .mode .box3 .boxLeft img {
        width: 3.07rem;
        height: 1.85rem;
        border-radius: 0.1rem;
    }
    .content .mode .boxRight {
        width: 3.09rem;
        height: 2.74rem;
        margin: 0.22rem auto 0;
    }
    .content .mode .boxRight .topMsg {
        height: 0.49rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .content .mode .boxRight .topMsg span {
        color: #4f5053;
        font-size: 0.32rem;
    }
    .content .mode .boxRight .topMsg button {
        width: 0.98rem;
        height: 0.49rem;
        border: 0;
        border-radius: 0.2rem;
        color: #fff;
        font-size: 0.26rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(45deg,#8de071,#5dc446);
    }
    .content .mode .boxRight .topMsg button img {
        width: 0.2rem;
        height: 0.2rem;
        margin-left: 0.05rem;
    }
    .content .mode .boxRight .dblCard {
        width: 100%;
        height: 1.92rem;
        display: flex;
        justify-content: space-between;
    }
    .content .mode .boxRight .dblCard>div {
        width: 1.5rem;
        height: 1.92rem;
        border-top-left-radius: 0.1rem;
        border-top-right-radius: 0.1rem;
        overflow: hidden;
    }
    .content .mode .boxRight .dblCard>div img {
        width: 100%;
        height: 1.5rem;
    }
    .content .mode .boxRight .dblCard>div .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    .content .mode .boxRight .dblCard>div .price p {
        font-size: 0.2rem;
        color: #fe7019;
    }
    .content .mode .boxRight .dblCard>div .price .now {
        font-size: 0.26rem;
    }
    .content .mode .boxRight .dblCard>div .price .origin {
        // 字上面加线
        text-decoration: line-through;
        color: #999999;
    }
    .content .mode .boxRight .dblCard .des {
        text-align: center;
        color: #4f5047;
        font-size: 0.2rem;
        margin-top: 0.14rem;
    }
</style>